<div class="example-wrapper">
    <div class="example-header">
        <span class="button-group">
            <button onclick="irelandAndUk()">Ireland &#x26; UK</button>
            <button onclick="endingStan()">Countries Ending 'stan'</button>
            <button onclick="printCountryModel()">Print Country</button>
            <button onclick="clearCountryFilter()">Clear Country</button>
            <button onclick="destroyCountryFilter()">Destroy Country</button>
        </span>
        <span class="button-group">
            <button onclick="ageBelow25()">Age Below 25</button>
            <button onclick="ageAbove30()">Age Above 30</button>
            <button onclick="ageBelow25OrAbove30()">Age Below 25 or Above 30</button>
            <button onclick="ageBetween25And30()">Age Between 25 and 30</button>
            <button onclick="clearAgeFilter()">Clear Age Filter</button>
        </span>
        <span class="button-group">
            <button onclick="after2010()">Date after 01/01/2010</button>
            <button onclick="before2012()">Date before 01/01/2012</button>
            <button onclick="dateCombined()">Date combined</button>
            <button onclick="clearDateFilter()">Clear Date Filter</button>
        </span>
        <span class="button-group">
            <button onclick="sportStartsWithS()">Sport starts with S</button>
            <button onclick="sportEndsWithG()">Sport ends with G</button>
            <button onclick="sportsCombined()">Sport starts with S and ends with G</button>
            <button onclick="clearSportFilter()">Clear Sport Filter</button>
        </span>
    </div>
    <div id="myGrid" style="height: 100%"></div>
</div>
